<template>
  <div class="table">
    <div class="item" v-for="(item, index)  in data" :key="index">
      <div class="col" style="width:200px">
        <div style="display: flex;">
          <div class="label" style="min-width:200px">{{ item.nowTime || "" }}</div>
        </div>
        <div class="value withimg">
          <div>
            {{ item.flightNumber || "" }}
          </div>
        </div>
      </div>
      <div class="col">
        <div class="label" style="min-width:200px">运输工具名称</div>
        <span class="value">
          <span>{{ item.transportName || "" }}</span>
        </span>
      </div>
      <div class="col">
        <div class="label" style="min-width:200px">运输方式</div>
        <span class="value">
          <!-- <span class="value1">
            <span>{{ item.transportType || "" }}</span>
          </span> -->
          <span>{{ item.transportType || "" }}</span>
        </span>
      </div>
      <div class="col">
        <div class="label" style="min-width:200px">承运人代码</div>
        <span class="value">
          <span>{{ item.carrierCode || "" }}</span>
        </span>
      </div>
      <div class="col">
        <div class="label" style="min-width:200px">创建时间</div>
        <div class="value">
          <span>{{ item.creatTime || "" }}</span>
        </div>
      </div>
      <div class="col" style="width: 250px;"></div>
      <div class="col fixed">
        <div class="label" style="min-width:250px">操作</div>
        <div class="value btns">
          <div>
            <div style="display: flex;">
              <el-button type="text" style="color: #1955CF">查看详情</el-button>
              <el-button type="text" style="color: #1955CF" @click="dialogButton(item)">状态记录</el-button>
              <el-button type="text" style="color: #1955CF">编辑</el-button>
              <el-button type="text" style="color: red">删除</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <el-dialog :visible.sync="dialogVisible" :show-close="false" width="40%" center>
      <div class="bodyTable">
        <el-table :data="tableData" stripe style="width: 100%;" height="400px">
          <el-table-column label="状态信息" min-width="140px">
            <template slot-scope="scope">{{ scope.row.stateLabel }}</template>
          </el-table-column>
          <el-table-column label="状态" min-width="140px">
            <template slot-scope="scope">{{ scope.row.state }}</template>
          </el-table-column>
          <el-table-column label="处理时间" min-width="150px">
            <template slot-scope="scope">{{ scope.row.updateTime }}</template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'myTable',
  props: {
    data: {
      type: Array
    }
  },
  components: {},
  data() {
    return {
      dialogVisible: false,
      tableData: [],
    }
  },
  watch: {

  },
  methods: {
    dialogButton(item) {
      this.dialogVisible = true
    },
  },

  computed: {},

  mounted() {
  },
}
</script>
<style lang='less' scoped>
.table {
  overflow: auto;
  width: 100%;
  // height: 100%;
}

.item {
  display: flex;
  margin-top: 20px;
  width: auto;
  line-height: 50px;

  .fixed {
    position: absolute;
    right: 14px;
    border-left: 1px solid #ebeef5;
    box-shadow: -3px 0px 10px #ebeef5;
    background-color: #fff;
  }

  .col {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;

    .label {
      height: 33px;
      background: #f5f5f5;
      font-size: 14px;
      font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
      font-weight: 400;
      color: #333333;
      display: flex;
      align-items: center;
      padding: 0 10px;
      box-sizing: border-box;
    }

    .value {
      height: 70px;
      border: 1px solid #e5e5e5;
      border-left: 0;
      display: flex;
      align-items: flex-start;
      padding: 10px;
      box-sizing: border-box;
      font-size: 14px;
      font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
      font-weight: 400;
      color: #000000;
    }

    .value1 {
      width: 80px;
      height: 23px;
      line-height: 23px;
      background: #F4F4F5;
      text-align: center;
      margin-top: 10px;
      margin-left: 20px;
      border-radius: 10px 10px 10px 10px;
    }

    .btns {
      display: flex;

      button {
        font-size: 14px;
        margin-left: 5px;
        line-height: 0px;
      }
    }

    img {
      width: 30px;
      height: 27.95px;
    }

    .withimg {
      div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
      }
    }
  }
}

.circle {
  display: flex;
  align-items: center;

  span:first-child {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }
}

/deep/ .el-dialog__header {
  padding: 0;
}

/deep/ .el-dialog__body {
  padding: 0;
}

.bodyTable {
  width: 100%;
  display: flex;
  justify-content: space-around;

  /deep/ .el-table th.el-table__cell {
    background-color: #EEF1F5;
  }

  /deep/ .el-table thead {
    color: #333333;
  }
}
</style>